@import '@influxdata/clockface/dist/variables.scss';

$panel-resizer--header: 47px;
$panel-resizer--drag-handle: 30px;

.flow-error {
  margin-top: $cf-space-3xs;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  border: $cf-border solid $cf-grey-5;
  background-color: $cf-grey-5;
  border-radius: $cf-radius 0 0 $cf-radius;
}

.flow-error--header {
  color: $cf-grey-85;
  width: $panel-resizer--header;
  flex: 0 0 $panel-resizer--header;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: $cf-space-2xs 0;
}

.flow-error--vis-toggle {
  align-items: center;
  justify-content: center;
  display: flex;
  font-size: 1.5em;
  transition: color 0.25s ease;
  width: $panel-resizer--drag-handle;
  height: $panel-resizer--drag-handle;
  position: relative;
  color: $c-dreamsicle;

  &:before {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.flow-error--body {
  position: relative;
  flex: 1 0 0;
  padding: $cf-space-2xs 0;

  h1 {
    color: $cf-grey-85;
    user-select: none;
    font-weight: $cf-font-weight--medium;
    font-size: 12px;
    margin: 0;
    padding: 0;
  }

  p {
    margin: 0;
  }
}
